<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header-card">
      <view class="header">
        <text class="title">工作台</text>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="section-card">
      <view class="function-grid">
        <view class="function-item" @click="navigateTo('/pages/alarm/index')">
          <view class="icon-wrapper">
            <uni-icons type="notification-filled" size="32" color="#2979ff"></uni-icons>
          </view>
          <text class="label">报警中心</text>
        </view>
        <view class="function-item" @click="navigateTo('/pages/device-data/index')">
          <view class="icon-wrapper">
            <uni-icons type="laptop" size="32" color="#2979ff"></uni-icons>
          </view>
          <text class="label">设备数据</text>
        </view>
        <view class="function-item" @click="navigateTo('/pages/project/index')">
          <view class="icon-wrapper">
            <uni-icons type="folder" size="32" color="#2979ff"></uni-icons>
          </view>
          <text class="label">项目管理</text>
        </view>
        <view class="function-item" @click="navigateTo('/pages/organization/index')">
          <view class="icon-wrapper">
            <uni-icons type="staff" size="32" color="#2979ff"></uni-icons>
          </view>
          <text class="label">组态</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header-card,
.section-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 20rpx;

  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 40rpx 20rpx;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      background: #ecf5ff;
    }

    .icon-wrapper {
      margin-bottom: 20rpx;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ecf5ff;
      border-radius: 50%;
    }

    .label {
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style>
